<template>
  <h1>Directive-自定义指令（属于破坏性更新）</h1>
  <h3>
    <li>1.Vue3指令的钩子函数</li>
  </h3>
  <div>
    <ul>
      <li>created 元素初始化的时候</li>
      <li>beforeMount 指令绑定到元素后调用 只调用一次</li>
      <li>mounted 元素插入父级dom调用</li>
      <li>beforeUpdate 元素被更新之前调用</li>
      <li>update 这个周期方法被移除 改用updated</li>
      <li>beforeUnmount 在元素被移除前调用</li>
      <li>unmounted 指令被移除后调用 只调用一次</li>
      <li>Vue2 指令 bind inserted update componentUpdated unbind</li>
    </ul>
    <hr />
    <h3>2.在setup内定义局部指令</h3>
    <p>
      必须以 vNameOfDirective
      的形式来命名本地自定义指令，以使得它们可以直接在模板中使用。
    </p>
    <br />
    <h3>3.生命周期钩子参数详解</h3>
    <div>
      第一个 el 当前绑定的DOM 元素 <br />

      第二个 DirectiveBinding <br />

      instance：使用指令的组件实例。<br />
      value：传递给指令的值。例如，在 v-my-directive="1 + 1" 中，该值为 2。<br />
      oldValue：先前的值，仅在 beforeUpdate 和 updated
      中可用。无论值是否有更改都可用。<br />
      arg：传递给指令的参数(如果有的话)。例如在 v-my-directive:foo 中，arg 为
      "foo"。<br />
      modifiers：包含修饰符(如果有的话) 的对象。例如在 v-my-directive.foo.bar
      中，修饰符对象为 {foo: true，bar: true}。<br />
      dir：一个对象，在注册指令时作为参数传递。例如，在以下指令中<br />
      <img src="../../assets/img/directive.jpg" alt="" /><br />
      第三个 当前元素的虚拟DOM 也就是Vnode <br />

      第四个 prevNode 上一个虚拟节点，仅在 beforeUpdate 和 updated 钩子中可用
      <br />
    </div>

    <button @click="change">切换</button>
    <Move v-move="{ background: color, flag: flag }"></Move>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, Directive, DirectiveBinding } from "vue";
import Move from "./move.vue";
let color = ref("green");
let flag = ref(false);
const change = () => {
  color.value = "red";
  flag.value = !flag.value;
};
type Dir = {
  background: string;
};
const vMove: Directive = {
  created() {
    console.log("====================>created");
  },
  beforeMount() {
    console.log("=================>beforeMount");
  },
  mounted(el: HTMLElement, dir: DirectiveBinding<Dir>) {
    el.style.background = dir.value.background;
    console.log("=================>mounted");
  },
  //   mounted(...args: Array<any>) {
  //     console.log("=================>mounted");
  //     console.log(args);
  //   },
  beforeUpdate(el: HTMLElement, dir: DirectiveBinding) {
    console.log("dir.value------------>", dir.value);
    console.log("===================>beforeUpdate");
  },
  updated(el: HTMLElement, dir: DirectiveBinding<Dir>) {
    console.log("======================>update");
    el.style.background = dir.value.background;
  },
  beforeUnmount() {
    console.log("======================>beforeUnmount");
  },
  unmounted() {
    console.log("======================>unmounted");
  },
};
</script>
<style lang="less" scoped>
ul > li {
  padding: 5px;
}
</style>
